<template>
	<div class="m-pad-width ui left fixed vertical inverted secondary stackable menu" style="background-color: #343a40;width: 15%;box-shadow: 0 14px 28px 10px rgba(0,0,0,.25),0 10px 28px 10px rgba(0,0,0,.22)!important;">
		<div class="ui container">
			
			<router-link to="/">
				<h3 class="ui  item m-grew " style="white-space:nowrap;padding-bottom:0;max-width: 100%;">
					 <img class="ui avatar image" src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/touxiang.jpg">
					 <span style="font-size: large;font-weight: 600;opacity: 0.7;"> Blog</span>
				</h3>
			</router-link>

			<el-divider><i class="compass  loading icon"></i></el-divider>
			
			<p style="color:#bec5c4;margin-left: 0.525rem;font-size: 1.15rem;margin-bottom: 0.525rem;">读万卷书</p>
			<router-link to="/home/" class="item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='home'}">
				<i class="home icon"></i> <span>首页</span>
			</router-link>
			

			<el-dropdown visible-change placement="bottom-end" trigger="click" @command="categoryRoute">
				<span class="el-dropdown-link item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='category'}" style="color: rgba(255,255,255,.7);">
					<i class="idea icon" ></i> <span >分类</span> <i class="caret down icon" style="float: right !important;"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="category.name" v-for="(category,index) in categoryList" :key="index">{{ category.name }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			
			<p style="color:#bec5c4;margin-left: 0.525rem;font-size: 1.15rem;margin-bottom: 0.525rem;margin-top: 1.7rem;">行万里路</p>
			<router-link to="/archives" class="item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='archives'}">
				<i class="clone icon"></i><span>日志</span>
			</router-link>

			<router-link to="/friends" class="item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='friends'}">
				<i class="skyatlas icon"></i><span>资源</span>
			</router-link>
			
			<p style="color:#bec5c4;margin-left: 0.525rem;font-size: 1.15rem;margin-bottom: 0.525rem;margin-top: 1.7rem;">点滴记录</p>
			<router-link to="/moments" class="item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='moments'}">
				<i class="comment alternate outline icon"></i><span>动态</span>
			</router-link>
			<router-link to="/about" class="item" :class="{'m-mobile-hide': mobileHide,'active':$route.name==='about'}">
				<i class="info icon"></i><span>关于我</span>
			</router-link>
			<div></div>
	
		</div>
	</div>
</template>

<script>
	import {
		getSearchBlogList
	} from "@/api/blog";
	import {
		mapState
	} from 'vuex'

	export default {
		name: "Nav",
		props: {
			blogName: {
				type: String,
				required: true
			},
			categoryList: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				showcategory:false,
				mobileHide: true,
				queryString: '',
				queryResult: [],
				timer: null
			}
		},
		computed: {
			...mapState(['clientSize'])
		},
		watch: {
			//路由改变时，滚动到顶部
			'$route.path'() {
						
			}
		},
		mounted() {

			// //监听点击事件，收起导航菜单
			// document.addEventListener('click', (e) => {
			// 	//遍历冒泡
			// 	let flag = e.path.some(item => {
			// 		if (item === this.$refs.nav) return true
			// 	})
			// 	//如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
			// 	if (!this.mobileHide && !flag) {
			// 		this.mobileHide = true
			// 	}
			// })
		},
		methods: {
			// toggle() {
			// 	this.mobileHide = !this.mobileHide
			// },
			showCategory(){
				this.showcategory = !this.showcategory
			},
			categoryRoute(name) {
				this.$router.push(`/category/${name}`)
			},
			debounceQuery(queryString, callback) {
				this.timer && clearTimeout(this.timer)
				this.timer = setTimeout(() => this.querySearchAsync(queryString, callback), 1000)
			},
			querySearchAsync(queryString, callback) {
				if (queryString == null ||
					queryString.trim() === '' ||
					queryString.indexOf('%') !== -1 ||
					queryString.indexOf('_') !== -1 ||
					queryString.indexOf('[') !== -1 ||
					queryString.indexOf('#') !== -1 ||
					queryString.indexOf('*') !== -1 ||
					queryString.trim().length > 20) {
					return
				}
				getSearchBlogList(queryString).then(res => {
					if (res.code === 200) {
						this.queryResult = res.data
						if (this.queryResult.length === 0) {
							this.queryResult.push({
								title: '无相关搜索结果'
							})
						}
						callback(this.queryResult)
					}
				}).catch(() => {
					this.msgError("请求失败")
				})
			},
			handleSelect(item) {
				if (item.id) {
					this.$router.push(`/blog/${item.id}`)
				}
			}
		}
	}
</script>

<style>
	.ui.vertical.menu .item>i.icon{
		float: left !important;
		margin-right: 1rem !important;

	}
	
	.el-dropdown-link{
		/* width: 96% !important; */
		margin-left: 3.910px !important;
	}

	.ui.secondary.menu .item {
		border-radius: 0.9375rem !important;
		width: 96% !important;
		margin-top: 0.3125rem !important;
		font-size: 1.15rem;
		font-weight: 600;
		
	}

	.ui.secondary.inverted.menu .active.item {
		background: #17a2b8 !important;
		/* opacity: 1.5; */
		color: #fff !important;
		border-radius: 0.9375rem !important;
		font-weight: 600;
	}

	.ui.fixed.menu .container {
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.el-divider__text{
		background-color: #343a40 !important;
		color: #d0d4db !important;
		
	}
	.ui.fixed.menu {
		transition: .3s ease-out;
	}

	.ui.inverted.pointing.menu.transparent {
		background: transparent !important;
	}

	.ui.inverted.pointing.menu.transparent .active.item:after {
		background: transparent !important;
		transition: .3s ease-out;
	}

	.ui.inverted.pointing.menu.transparent .active.item:hover:after {
		background: transparent !important;
	}

	

	.el-popper .popper__arrow::after {
		content: none !important;
	}

	.popper__arrow {
		display: none !important;
	}




	
</style>
